<template>
  <div class="main">
    <a-space>
      <div class="left">
        <a-card id="messageCard">
          <a-input-search
            id="search"
            placeholder="查询最近联系人"
            search-button
          />
          <a-space style="margin: 10px">
            <a-button class="button">全部</a-button>
            <a-button class="button">新消息</a-button>
            <a-button class="button">仅沟通</a-button>
            <a-button class="button">有交换</a-button>
            <a-button class="button">有面试</a-button>
          </a-space>
          <a-link>
            <a-card style="width: 370px; height: 120px">
              <a-space>
                <a-avatar style="left: 1px">
                  <img
                    alt="avatar"
                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
                  />
                </a-avatar>
                小帅
                <a-divider direction="vertical" />
                字节跳动
                <a-divider direction="vertical" />
                产品经理
              </a-space>
            </a-card>
          </a-link>
        </a-card>
      </div>
      <div class="right">
        <a-card id="chattingCard">
          <a-card :bordered="false" style="width: 780px; height: 50px">
            <a-space style="font-size: 20px">
              李先生
              <a-divider direction="vertical" />
              字节跳动
              <a-divider direction="vertical" />
              项目经理
              <a-button type="primary" shape="round" style="margin: 10px 10px">
                置顶
              </a-button>
            </a-space>
          </a-card>
          <a-divider />
          <div class="chattingArea">
            <a-card> 聊天区域</a-card>
          </div>
          <div class="sendMessageArea">
            <a-divider />
            <a-space style="right: 150px; margin: 0px 10px 10px 10px">
              <a-popover>
                <a-link>
                  <icon-face-smile-fill size="25" style="top: 350px" />
                </a-link>
                <template #content>
                  <p>表情</p>
                </template>
              </a-popover>
              <a-popover>
                <a-link>
                  <icon-file-image size="25" style="top: 350px" />
                </a-link>
                <template #content>
                  <p>发送图片</p>
                </template>
              </a-popover>
              <a-popover>
                <a-link hoverable>
                  <icon-drive-file size="25" style="top: 350px" />
                </a-link>
                <template #content>
                  <p>发送文件</p>
                </template>
              </a-popover>

              <a-popover>
                <a-button>发简历</a-button>
                <template #content>
                  <p>发简历: 双方回复可用</p>
                </template>
              </a-popover>
              <a-popover>
                <a-button>换微信</a-button>
                <template #content>
                  <p>交换微信: 双方回复可用</p>
                </template>
              </a-popover>
              <a-popover>
                <a-button>换电话</a-button>
                <template #content>
                  <p>交换电话: 双方回复可用</p>
                </template>
              </a-popover>
            </a-space>
            <a-textarea
              style="width: 750px; height: 100px"
              :max-length="100"
              allow-clear
              show-word-limit
              placeholder="请输入发送内容"
            />
            <a-button
              type="primary"
              style="width: 100px; left: 500px"
              @click="sendMessage"
              >发送
            </a-button>
          </div>
        </a-card>
      </div>
    </a-space>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";

// 定义响应式数据
const message = ref(undefined);
const list = ref([]);
const userId = JSON.parse(localStorage.getItem("user")).userId;
let websocket = new WebSocket("ws://localhost:8090/chat/" + userId);

// 初始化 WebSocket
onMounted(() => {
  initWebsocket();
});

// 定义方法
const initWebsocket = () => {
  const userId = JSON.parse(localStorage.getItem("user")).userId;
  console.log(JSON.parse(localStorage.getItem("user")));
  console.log("userId = " + userId);
  websocket.value = new WebSocket("ws://localhost:8090/chat/" + userId);
  websocket.value.onopen = websocketOnOpen;
  websocket.value.onmessage = websocketOnMessage;
};

// 连接成功回调
const websocketOnOpen = () => {
  console.log("WebSocket连接成功");
};

// 接收消息回调
const websocketOnMessage = (e) => {
  let dataJson = JSON.parse(e.data);
  let listItem = {
    id: "we",
    content: dataJson.message,
    pic: dataJson.pic,
  };
  list.value.push(listItem);
};

// 发送消息方法
const sendMessage = () => {
  let messageData = {
    to: "123",
    from: JSON.parse(localStorage.getItem("user")).username,
    message: message.value,
    pic: JSON.parse(localStorage.getItem("user")).picture,
  };
  let userListItem = {
    id: JSON.parse(localStorage.getItem("user")).id,
    content: message.value,
    pic: JSON.parse(localStorage.getItem("user")).picture,
  };
  list.value.push(userListItem);
  websocket.value.send(JSON.stringify(messageData));
};

// const init = () => {
//   console.log("开始连接");
//   if (typeof WebSocket === "undefined") {
//     console.log("此浏览器不支持WebSocket");
//   } else {
//     let userId = 123;
//     if (this.websocket && this.websocket.readyState !== WebSocket.CLOSED) {
//       this.websocket.close();
//     }
//     this.websocket = new WebSocket("ws://localhost:8090/chat/" + userId);
//
//     this.websocket.onopen = function () {
//       console.log("连接成功");
//     };
//
//     this.websocket.onmessage = function (evt) {
//       console.log("收到的消息" + evt.data);
//     };
//
//     this.websocket.onclose = function () {
//       console.log("连接已关闭...");
//     };
//   }
// };

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const send = () => {
  //发送消息
  console.log("开始发送消息");
  websocket.value.send("你好");
};
</script>
<style scoped>
.main {
  position: relative;
  width: 1500px;
  height: 700px;
}

.left {
  position: absolute;
  left: 100px;
}

#messageCard {
  position: absolute;
  width: 400px;
  height: 600px;
}

.right {
  position: absolute;
  left: 500px;
}

#chattingCard {
  position: absolute;
  width: 800px;
  height: 600px;
}

#search {
  width: 380px;
  height: 40px;
}

.button {
  width: 60px;
  height: 35px;
  margin: 3px;
}

.sendMessageArea {
  position: absolute;
  top: 380px;
  width: 400px;
}
</style>
